<template>
  <div class="tianjiu">
    <!--<div class="swiper-container swiper-container3">-->
      <!--<div class="swiper-wrapper">-->
        <a v-for="(promotion, index) of pro" :key="index" :href="url+'/goods_'+promotion.id+'.htm'" class="promotions-goods">
          <div class="wine-of-promotion" >
            <img :src="promotion.img ? url+promotion.img : 'http://172.25.4.230:8080/upload/img//20170927095426099.jpg'" class="wine-pic">
            <!--<p class="now-price">原价：<del>{{promotion.old_price}}</del>&nbsp;&nbsp;现价：<span v-if="hasHeader">{{promotion.price}}</span><a v-else href="http://www.finewest.cn/user/login.htm">登录可见</a></p>-->
            <h1>{{promotion.name}}</h1>
            <p>酒庄出厂价：<span v-if="hasHeader">{{promotion.o_price}}</span><router-link v-else to="/login">登录可见</router-link></p>
            <p>到港完税价：<span v-if="hasHeader">{{promotion.price}}</span><router-link v-else to="/login">登录可见</router-link></p>
            <p>产地：{{promotion.chanqu}}</p>
            <p>等级：{{promotion.grade}}</p>
            <p>库存：{{promotion.inv}}</p>
            <p>亮点：{{promotion.liangdian}}</p>
            <!--<img class="discount" src="../assets/img/discount.png" width="19" height="19">-->
          </div>
        </a>
      <!--</div>-->
    <!--<div class="swiper-button-next"><router-link to="/sweet-wine"><img src="../assets/img/jump.png" width="37" height="37"></router-link></div>-->
    <!--</div>-->
  </div>
</template>
<script>
  export default {
    name: 'promotions',
    props: ['pro', 'sure', 'Swiper', 'hasHeader'],
    data () {
      return {
        url: 'http://www.finewest.cn'
      }
    },
    updated () {
      var swiper = new Swiper('.swiper-container3', {
        nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
        slidesPerView: 2,
        slidesPerGroup: 2,
        onlyExternal: true,
        loop: true,
        onTouchEnd: function () {
          swiper.startAutoplay()
        }
      })
    }
  }
</script>
<style scope lang="scss">
  $p-size: 10px;
  $p-color: #000000;
  .tianjiu{
    margin-bottom: 4px;
    background: #ffffff;
    position:relative;
    .promotions-goods{
      display: block;
      background-color: #ffffff!important;
      width: calc(50%)!important;
      float: left;
      position: relative;
      border-bottom: 1px solid #dedede;
      padding-bottom: 10px;
      margin: 0!important;
      &:nth-child(odd){
         border-right: 1px solid #f5f5f5;
         box-sizing: border-box;
       }
      &:nth-child(even){
         border-left: 1px solid #f5f5f5;
         box-sizing: border-box;
       }
      .wine-of-promotion{
        width: calc(50% - 49px);
        display: table;
        margin: 0 auto;
        p{
          font-size: $p-size;
          color: #555555;
          del{
            font-size: $p-size;
            color: $p-color;
          }
          a{
            font-size: $p-size;
            color: $p-color;
            display: inline;
          }
          span{
            font-size: $p-size;
            color: #e92d46;
          }
        }
        p.now-price{
          white-space:nowrap;
        }
        h1{
          font-size: 10px;
          color: #555555;
          line-height: 12px;
          height: 24px;
          overflow: hidden;
          margin-bottom: 9px;
          word-break: break-all;
        }
        img.wine-pic{
          display: table;
          width: 120px;
          height: 120px;
          margin: 0 auto 10px;
        }
        img.discount{
          position: absolute;
          top: 0;
          left: 10px;
        }
      }
    }
  }
  @media screen and (max-width: 374px) {
    .promotions-goods .wine-of-promotion img.discount{
      position: absolute;
      top: 0px;
      left: 2px;
    }
  }
</style>
